<template>
  <div class="m-title-wrap">
        <div class="title-box">
          <div class="title" v-text="title" style="min-width: 100px"></div>
          <div class="content">
            <el-tag
              effect="plain"
              type="info"
              style="cursor: pointer; margin: 4px"
              v-for="(item, index) in content.titleList"
              :key="index"
              @click="handleMoreClick(content.name, item)"
            >
              {{ item }}
              <!-- <span v-if="index + 1 != content.titleList.length">|</span> -->
            </el-tag>
          </div>
        </div>
        <div
          v-if="more"
          @click="handleMoreClick(content.name)"
          class="more"
          style="min-width: 50px"
        >
          {{ more }}<i class="el-icon-arrow-right"></i>
        </div>
      </div>
</template>
<script>
// content内容头部组件
export default {
  name: "MBlockTitle",
  props: {
    type: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "标题",
    },
    more: {
      type: String,
    },
    content: {
      type: Object,
      default() {
        return {};
      },
    },
    gourl: {
      type: String,
      default: "",
    },
  },

  methods: {
    handleMoreClick(path, item = "") {
      // if (this.type != "赛项资源") {
      //   this.$message("功能暂未开放！敬请期待~");
      //   return;
      // }
      if (path == "课程资源") {
        this.$router.push({
          path: "/courseresources",
          query: { row: item },
        });
      }
      if (path == "赛项资源") {
        this.$router.push({
          path: "/eventresources",
          query: { row: item },
        });
      }
      if (path == "1+X证书资源") {
        this.$router.push({
          path: "/bookresources",
          query: { row: item },
        });
      }
      if (path == "技能培训") {
        this.$router.push({
          path: "/skillsresources",
          query: { row: item },
        });
      }
      if (path == "金职大讲堂") {
        this.$router.push({
          path: "/courseResources",
          query: { row: item },
        });
      }
      if (path == "行业资源") {
        this.$router.push({
          path: "/industryresources",
          query: { row: item },
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-tag--plain {
  color: #737980;
  background-color: #f5f6f7 !important;
}
$green: #000;
.m-title-wrap {
  // width: 1200px;
  width: 100%;
  max-width: 1200px;
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 45px 0 0 0;
  .title-box {
    display: flex;
    .title {
      font-size: 22px;
      padding-left: 6px;
      color: $green;
      line-height: 36px;
    }
    .content {
      max-width: 1000px;
      font-size: 14px;
      margin-left: 30px;
      // padding-top: 5px;
      color: #737980;
    }
  }

  .more {
    cursor: pointer;
    color: #737980;
  }
}
</style>
